<template>
  <div class="app-container">
    <el-switch
      v-if="status"
      v-model="status"
      active-value="1"
      inactive-value="2"
      active-color="#13ce66"
      inactive-color="#ff4949"
      active-text="真实"
      inactive-text="套壳"
    />
    <el-form v-if="status == 1" ref="ruleForm1" :model="form" label-width="100px">
      <div>
        <h2>真实页面</h2>
        <h3>弹窗</h3>
        <el-input v-model="form.a1" size="mini" placeholder="请输入" />
        <el-input v-model="form.a2" size="mini" placeholder="请输入" />
        <el-input v-model="form.a3" size="mini" placeholder="请输入" />

        <h3>首页</h3>
        <el-input v-model="form.v1" size="mini" placeholder="请输入" />
        <el-input v-model="form.v2" size="mini" placeholder="请输入" />
        <el-input v-model="form.v3" size="mini" placeholder="请输入" />
        <el-input v-model="form.v4" size="mini" placeholder="请输入" />
        <el-input v-model="form.v5" size="mini" placeholder="请输入" />
        <el-input v-model="form.v6" size="mini" placeholder="请输入" />
        <el-input v-model="form.t1" size="mini" placeholder="请输入" />
        <el-input v-model="form.v7" size="mini" placeholder="请输入" />
        <el-input v-model="form.v8" size="mini" placeholder="请输入" />
        <el-input v-model="form.t2" size="mini" placeholder="请输入" />
        <el-upload
          ref="upload"
          :action="upload.url"
          :headers="upload.headers"
          :on-remove="handleRemove"
          :on-success="handleOnSuccess"
          :file-list="upload.fileList"
          list-type="picture-card"
          :limit="1"
        >
          <i class="el-icon-plus" />
        </el-upload>
        <el-input v-model="form.v9" size="mini" placeholder="请输入" />

        <h3>网上查询</h3>
        <el-input v-model="form.b1" size="mini" placeholder="请输入" />
        <el-input v-model="form.b2" size="mini" placeholder="请输入" />
        <el-input v-model="form.b3" size="mini" placeholder="请输入" />
        <el-input v-model="form.b4" size="mini" placeholder="请输入" />
        <el-input v-model="form.b5" size="mini" placeholder="请输入" />
        <el-input v-model="form.b6" size="mini" placeholder="请输入" />

        <h3>人行征信中心官网</h3>
        <el-input v-model="form.c1" size="mini" placeholder="请输入" />
        <el-input v-model="form.c2" size="mini" placeholder="请输入" />
        <el-input v-model="form.c3" size="mini" placeholder="请输入" />
        <el-input v-model="form.c4" size="mini" placeholder="请输入" />
        <el-input v-model="form.c5" size="mini" placeholder="请输入" />

        <h3>银行网银</h3>
        <el-input v-for="item in 16" :key="item" v-model="form['d' + item]" size="mini" placeholder="请输入" />

        <h3>手机银行APP</h3>
        <el-input v-model="form.e1" size="mini" placeholder="请输入" />
        <div v-for="(item,idx) in form.e2.length" :key="item.name" style="font-size: 12px;width: 100%;display: flex;justify-content: space-between">
          <el-input v-model="form.e2[idx].name" size="mini" placeholder="请输入" />
          <el-input v-model="form.e2[idx].img" size="mini" placeholder="请输入" />
          <el-input v-model="form.e2[idx].tip1" size="mini" placeholder="请输入" />
          <el-input v-model="form.e2[idx].tip2" size="mini" placeholder="请输入" />
        </div>
        <el-input v-model="form.e3" size="mini" placeholder="请输入" />
        <el-input v-model="form.e4" size="mini" placeholder="请输入" />
        <br>
      </div>
      <el-button type="primary" size="small" @click="submitForm('ruleForm1')">提交</el-button>
    </el-form>
    <el-form v-if="status == 2" ref="ruleForm2" :model="formFake" label-width="100px">
      <div>
        <h2>伪装页面</h2>
        <h3>弹窗</h3>
        <el-input v-model="formFake.a1" size="mini" placeholder="请输入" />
        <el-input v-model="formFake.a2" size="mini" placeholder="请输入" />
        <el-input v-model="formFake.a3" size="mini" placeholder="请输入" />

        <h3>首页</h3>
        <el-input v-model="formFake.v1" size="mini" placeholder="请输入" />
        <el-input v-model="formFake.v2" size="mini" placeholder="请输入" />
        <el-input v-model="formFake.v3" size="mini" placeholder="请输入" />
        <el-input v-model="formFake.v4" size="mini" placeholder="请输入" />
        <el-input v-model="formFake.v5" size="mini" placeholder="请输入" />
        <el-input v-model="formFake.v6" size="mini" placeholder="请输入" />
        <el-input v-model="formFake.t1" size="mini" placeholder="请输入" />
        <el-input v-model="formFake.v7" size="mini" placeholder="请输入" />
        <el-input v-model="formFake.v8" size="mini" placeholder="请输入" />
        <el-input v-model="formFake.t2" size="mini" placeholder="请输入" />
        <el-upload
          ref="upload"
          :action="uploadFake.url"
          :headers="uploadFake.headers"
          :on-remove="handleRemoveFake"
          :on-success="handleOnSuccessFake"
          :file-list="uploadFake.fileList"
          list-type="picture-card"
          :limit="1"
        >
          <i class="el-icon-plus" />
        </el-upload>
        <el-input v-model="formFake.v9" size="mini" placeholder="请输入" />

        <h3>网上查询</h3>
        <el-input v-model="formFake.b1" size="mini" placeholder="请输入" />
        <el-input v-model="formFake.b2" size="mini" placeholder="请输入" />
        <el-input v-model="formFake.b3" size="mini" placeholder="请输入" />
        <el-input v-model="formFake.b4" size="mini" placeholder="请输入" />
        <el-input v-model="formFake.b5" size="mini" placeholder="请输入" />
        <el-input v-model="formFake.b6" size="mini" placeholder="请输入" />

        <h3>人行征信中心官网</h3>
        <el-input v-model="formFake.c1" size="mini" placeholder="请输入" />
        <el-input v-model="formFake.c2" size="mini" placeholder="请输入" />
        <el-input v-model="formFake.c3" size="mini" placeholder="请输入" />
        <el-input v-model="formFake.c4" size="mini" placeholder="请输入" />
        <el-input v-model="formFake.c5" size="mini" placeholder="请输入" />

        <h3>银行网银</h3>
        <el-input v-for="item in 16" :key="'d' + item" v-model="formFake['d' + item]" size="mini" placeholder="请输入" />

        <h3>手机银行APP</h3>
        <el-input v-model="formFake.e1" size="mini" placeholder="请输入" />

        <div v-for="(item,idx) in formFake.e2.length" :key="item.name" style="font-size: 12px;width: 100%;display: flex;justify-content: space-between">
          <el-input v-model="formFake.e2[idx].name" size="mini" placeholder="请输入" />
          <el-input v-model="formFake.e2[idx].img" size="mini" placeholder="请输入" />
          <el-input v-model="formFake.e2[idx].tip1" size="mini" placeholder="请输入" />
          <el-input v-model="formFake.e2[idx].tip2" size="mini" placeholder="请输入" />
        </div>
        <el-input v-model="formFake.e3" size="mini" placeholder="请输入" />
        <el-input v-model="formFake.e4" size="mini" placeholder="请输入" />
        <br>
      </div>
      <el-button type="primary" size="small" @click="submitForm('ruleForm2')">提交</el-button>

    </el-form>
  </div>
</template>

<script>
import * as estateApi from '@/api/estate'
import { getToken } from '@/utils/auth'
export default {
  data() {
    return {
      id: 0,
      imgPrefix: process.env.VUE_APP_DOMAIN,
      upload: {
        open: false,
        title: '',
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: 'Bearer ' + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_UPLOAD_API + '/upload',
        // 上传的文件列表
        fileList: []
      },
      uploadFake: {
        open: false,
        title: '',
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: 'Bearer ' + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_UPLOAD_API + '/upload',
        // 上传的文件列表
        fileList: []
      },
      loading: false,
      form: {
        a1: '您的个人风险报告生成中',
        a2: '您的个人风险报告生成中',
        a3: '立即了解',
        // 首页
        v1: '个人征信官方查询渠道',
        v2: '包含以下三种渠道查询',
        v3: '网上查询',
        v4: '电子版个人信用报告（简版）',
        v5: '银行柜台查询',
        v6: '纸质版个人信用报告（详版）',
        t1: '本人可持有效身份证件原价到中国人民银行市级分行营业管理部征信服务大厅及所辖支行征信查询柜台办理每年有2次免费查询机会，超过次数每次收取10元服务费。',
        v7: '自助机查询',
        v8: '纸质版个人信用报告（详版）',
        t2: '信用报告查询服务网点自助机，每年同样可免费查询2次。超过2次的，需要到征信查询柜台申请查询，并收取服务费10元/次。',
        img1: '',
        v9: 'https://manage.whha999.com/query/#/Home2?cid=112&templateId=2',
        // 网上查询
        b1: '请选择网上查询渠道',
        b2: '个人征信网上查询包含以下3种查询渠道',
        b3: '人行征信中心官网',
        b4: '银行网银',
        b5: '手机银行APP',
        b6: '*网上查询渠道只能查询您本人的电子版信用报告。请您注意，切勿将信用报告提供给他人或其他机构。',
        // 人行征信中心官网
        c1: '人行征信中心官网地址',
        c2: 'https://ipcrs.pbccrc.org.cn/',
        c3: '复制网址',
        c4: '您可以在电脑端浏览器内打开以上网址链接,注册并登录“个人信用信息服务平台”后即查询个人信用报告。',
        c5: '*页面信息仅供参考',
        // 银行网银
        d1: '以下网银银行可查询征信',
        d2: '通过网银查询征信需在电脑端登录',
        d3: '复制网址',
        d4: '工商银行网银',
        d5: 'http://www.icbc.com.cn/icbc/',
        d6: '建设银行网银',
        d7: 'https://ibsbistar.ccb.com.cn/',
        d8: '招商银行网银',
        d9: 'https://www.cmbchina.com/',
        d10: '广发银行网银',
        d11: 'https://ebanks.cgbchina.com.cn/perbank/',
        d12: '浦发银行网银',
        d13: 'https://ebank.spdb.com.cn/msper-web-index/prelogin.do',
        d14: '中信银行网银',
        d15: 'https://i.bank.ecitic.com/',
        d16: '*页面信息仅供参考',
        // 手机银行APP
        e1: '以下手机银行APP可查询征信',
        e2: [{ name: '工商银行', img: '/pages/imgs/1.png', tip1: '首页搜索框输入"信用报告"并搜索>点击"信用报告";', tip2: '首页点击"全部">查看"金融助手"分类>点击"信用报告"。' },
          { name: '建设银行', img: '/pages/imgs/2.png', tip1: '首页搜索框输入"信用报告"并搜索>点击"个人信用报告";', tip2: '首页点击"全部">查看"金融助手"分类>点击"个人信用报告"。' },
          { name: '招商银行', img: '/pages/imgs/3.png', tip1: '首页搜索框输入"信用报告"并搜索>点击"个人信用报告";', tip2: '首页点击"全部">查看"金融助手"分类>点击"个人信用报告"。' },
          { name: '中国银行', img: '/pages/imgs/4.png', tip1: '首页搜索框输入"征信"并搜索>点击"征信查询";', tip2: '首页点击"更多">查看"助手"分类>点击"征信查询"。' },
          { name: '浦发银行', img: '/pages/imgs/5.png', tip1: '首页搜索框输入"征信"并搜索>点击"征信查询";', tip2: '首页点击"更多">查看"生活权益"分类>点击"征信查询"。' },
          { name: '广发银行', img: '/pages/imgs/6.png', tip1: '首页搜索框输入"信用报告"并搜索>点击"个人信用报告";', tip2: '首页点击"全部">查看"生活服务"分类>点击"个人信用报告"。' },
          { name: '交通银行', img: '/pages/imgs/7.png', tip1: '首页搜索框输入"信用报告"并搜索>点击"个人信用报告";', tip2: '首页点击"全部">查看"特色服务"分类>点击"个人信用报告"。' },
          { name: '中信银行', img: '/pages/imgs/8.png', tip1: '首页搜索框输入"信用报告"并搜索>点击"信用报告查询";', tip2: '首页点击"全部">查看"特色服务"分类>点击"信用报告查询"。' },
          { name: '光大银行', img: '/pages/imgs/9.png', tip1: '首页搜索框输入"信用报告"并搜索>点击"个人信用报告";', tip2: '首页点击"城市服务">点击"个人信用报告"。' },
          { name: '平安银行', img: '/pages/imgs/10.png', tip1: '首页搜索框输入"信用报告"并搜索>点击"信用报告";', tip2: '首页点击"更多">查看"贷款"分类>点击"信用报告"。' }],
        e3: '如何找到征信查询入口',
        e4: '*页面信息仅供参考'
      },
      formFake: {
        a1: '您的个人风险报告生成中fake',
        a2: '您的个人风险报告生成中',
        a3: '立即了解',
        // 首页
        v1: '个人征信官方查询渠道',
        v2: '包含以下三种渠道查询',
        v3: '网上查询',
        v4: '电子版个人信用报告（简版）',
        v5: '银行柜台查询',
        v6: '纸质版个人信用报告（详版）',
        t1: '本人可持有效身份证件原价到中国人民银行市级分行营业管理部征信服务大厅及所辖支行征信查询柜台办理每年有2次免费查询机会，超过次数每次收取10元服务费。',
        v7: '自助机查询',
        v8: '纸质版个人信用报告（详版）',
        t2: '信用报告查询服务网点自助机，每年同样可免费查询2次。超过2次的，需要到征信查询柜台申请查询，并收取服务费10元/次。',
        img1: '',
        v9: 'https://manage.whha999.com/query/#/Home2?cid=112&templateId=2',
        // 网上查询
        b1: '请选择网上查询渠道',
        b2: '个人征信网上查询包含以下3种查询渠道',
        b3: '人行征信中心官网',
        b4: '银行网银',
        b5: '手机银行APP',
        b6: '*网上查询渠道只能查询您本人的电子版信用报告。请您注意，切勿将信用报告提供给他人或其他机构。',
        // 人行征信中心官网
        c1: '人行征信中心官网地址',
        c2: 'https://ipcrs.pbccrc.org.cn/',
        c3: '复制网址',
        c4: '您可以在电脑端浏览器内打开以上网址链接,注册并登录“个人信用信息服务平台”后即查询个人信用报告。',
        c5: '*页面信息仅供参考',
        // 银行网银
        d1: '以下网银银行可查询征信',
        d2: '通过网银查询征信需在电脑端登录',
        d3: '复制网址',
        d4: '工商银行网银',
        d5: 'http://www.icbc.com.cn/icbc/',
        d6: '建设银行网银',
        d7: 'https://ibsbistar.ccb.com.cn/',
        d8: '招商银行网银',
        d9: 'https://www.cmbchina.com/',
        d10: '广发银行网银',
        d11: 'https://ebanks.cgbchina.com.cn/perbank/',
        d12: '浦发银行网银',
        d13: 'https://ebank.spdb.com.cn/msper-web-index/prelogin.do',
        d14: '中信银行网银',
        d15: 'https://i.bank.ecitic.com/',
        d16: '*页面信息仅供参考',
        // 手机银行APP
        e1: '以下手机银行APP可查询征信',
        e2: [{ name: '工商银行', img: '/pages/imgs/1.png', tip1: '首页搜索框输入"信用报告"并搜索>点击"信用报告";', tip2: '首页点击"全部">查看"金融助手"分类>点击"信用报告"。' },
          { name: '建设银行', img: '/pages/imgs/2.png', tip1: '首页搜索框输入"信用报告"并搜索>点击"个人信用报告";', tip2: '首页点击"全部">查看"金融助手"分类>点击"个人信用报告"。' },
          { name: '招商银行', img: '/pages/imgs/3.png', tip1: '首页搜索框输入"信用报告"并搜索>点击"个人信用报告";', tip2: '首页点击"全部">查看"金融助手"分类>点击"个人信用报告"。' },
          { name: '中国银行', img: '/pages/imgs/4.png', tip1: '首页搜索框输入"征信"并搜索>点击"征信查询";', tip2: '首页点击"更多">查看"助手"分类>点击"征信查询"。' },
          { name: '浦发银行', img: '/pages/imgs/5.png', tip1: '首页搜索框输入"征信"并搜索>点击"征信查询";', tip2: '首页点击"更多">查看"生活权益"分类>点击"征信查询"。' },
          { name: '广发银行', img: '/pages/imgs/6.png', tip1: '首页搜索框输入"信用报告"并搜索>点击"个人信用报告";', tip2: '首页点击"全部">查看"生活服务"分类>点击"个人信用报告"。' },
          { name: '交通银行', img: '/pages/imgs/7.png', tip1: '首页搜索框输入"信用报告"并搜索>点击"个人信用报告";', tip2: '首页点击"全部">查看"特色服务"分类>点击"个人信用报告"。' },
          { name: '中信银行', img: '/pages/imgs/8.png', tip1: '首页搜索框输入"信用报告"并搜索>点击"信用报告查询";', tip2: '首页点击"全部">查看"特色服务"分类>点击"信用报告查询"。' },
          { name: '光大银行', img: '/pages/imgs/9.png', tip1: '首页搜索框输入"信用报告"并搜索>点击"个人信用报告";', tip2: '首页点击"城市服务">点击"个人信用报告"。' },
          { name: '平安银行', img: '/pages/imgs/10.png', tip1: '首页搜索框输入"信用报告"并搜索>点击"信用报告";', tip2: '首页点击"更多">查看"贷款"分类>点击"信用报告"。' }],
        e3: '如何找到征信查询入口',
        e4: '*页面信息仅供参考'
      },
      status: 0
    }
  },
  watch: {
    status(nv) {
      this.statusChange(nv)
    }
  },
  mounted() {
    if (this.$route.query && this.$route.query.id) {
      this.id = this.$route.query.id
      this.handleQuery()
    }
  },
  methods: {
    handleRemove(file, fileList) {
      this.upload.fileList = fileList
      this.form.img1 = ''
    },
    handleOnSuccess(response, file, fileList) {
      this.form.img1 = file.response.data.path
    },
    handleRemoveFake(file, fileList) {
      this.uploadFake.fileList = fileList
      this.formFake.img1 = ''
    },
    handleOnSuccessFake(response, file, fileList) {
      this.formFake.img1 = file.response.data.path
    },
    handleSelectionChange(rows) {
      this.selectedList = rows
    },
    handleDelete(id) {
      this.$confirm('此操作将删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        estateApi.del({ id: id }).then(() => {
          this.handleQuery()
          this.$message({
            type: 'success',
            message: '删除成功'
          })
        })
      })
    },
    async handleQuery() {
      this.loading = true
      try {
        const { data } = await estateApi.getInfo({ id: this.id })
        if (data.info) {
          this.form = JSON.parse(data.info)
          this.upload.fileList = [{ url: process.env.VUE_APP_DOMAIN + this.form.img1, name: this.form.img1, response: { data: { path: this.form.img1 }}}]
        }
        if (data.info2) {
          this.formFake = JSON.parse(data.info2)
          this.uploadFake.fileList = [{ url: process.env.VUE_APP_DOMAIN + this.formFake.img1, name: this.formFake.img1, response: { data: { path: this.formFake.img1 }}}]
        }
        this.status = data.status
      } catch (e) {
        console.log(e)
      } finally {
        this.loading = false
      }
    },
    async statusChange(status) {
      try {
        await estateApi.update({ id: this.id, status })
      } catch (e) {
        console.log(e)
      } finally {
        this.loading = false
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate(async(valid) => {
        if (valid) {
          if (this.id) {
            await estateApi.update({ info: JSON.stringify(this.form), info2: JSON.stringify(this.formFake), id: this.id })
          }
          this.handleQuery()
          this.$message({
            type: 'success',
            message: '保存成功'
          })
        } else {
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
  .thumb{
    width: 100px;
    height: 100px;
    object-position: center;
    object-fit: contain;
    margin: 0 auto;
    display: block;
  }
  ::v-deep .el-upload--picture-card{
    width: 100px;
    height: 100px;
    line-height: 100px;
  }
  ::v-deep {
    .el-upload-list--picture-card .el-upload-list__item{
      width: 100px;
      height: 100px;
      transition: unset;
    }
  }
  ::v-deep{
    input{
      margin-bottom: 10px;
    }
    .el-progress-circle{
      width: 100px!important;
      height: 100px!important;
    }
    .el-upload-list--picture-card .el-progress{
      width: 100px!important;
    }
  }
</style>

